<template>
  <BasicModal title="订单管理" @register="registerModal"
              :showCancelBtn="true" :showOkBtn="true" :canFullscreen="false" :centered="true"
              :width="'70%'"
              :bodyStyle="{height:'calc(100vh - 120px)', padding:'8px', overflowY:'auto'}"
              @ok="onPrint" okText="打印"
  >
    <a-card :bordered="false" class="j-print-demo" >
      <section ref="print" id="printContent">
        <view v-for="(print, index) in printList">
          <h1 class="h1-page">费用报销单</h1>
          <a-row :gutter="[16, 16]">
            <a-col :span="8">
              <div class="span-page">
                <span class="mr-10px">转账</span>
                <span>{{print.orderId}}</span>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="span-page">
                <span style="width: 17mm">填表日期：</span>
                <span style="width: 15mm"><label>{{ year }}</label>年</span>
                <span style="width: 10mm"><label>{{ month }}</label>月</span>
                <span style="width: 10mm"><label>{{ day }}</label>日</span>
              </div>
            </a-col>
            <a-col :span="8">

            </a-col>
          </a-row>
          <table border="1" cellspacing="0" class="table-page">
            <tr>
              <td class="td-left">部门</td>
              <td class="text-left" style="width: 90mm; height: 4mm; padding: 0 8px; line-height: 105%;">
                {{print.dwmc}}
              </td>
              <td class="td-left">姓名</td>
              <td class="text-left"></td>
            </tr>
            <tr>
              <td class="td-left">报销事由</td>
              <td class="text-left" colspan="3" style="height: 140px; vertical-align:top; padding: 5px 8px;line-height: 110%; ">
                {{print.bz}}
              </td>
            </tr>
            <tr>
              <td colspan="4" class="text-left">
                <label>报销单据</label>
                <span style="padding: 5px 15px; font-size: 16px"></span>
                <label style="margin-right: 8px">张</label>
                <label>合计金额（大写）</label>
                <span style="padding: 5px 6px 5px 0px; font-size: 16px">{{print.B0}}</span>
                <label class="font-bold">拾</label>
                <span>{{print.B1}}</span>
                <label class="font-bold">万</label>
                <span>{{print.B2}}</span>
                <label class="font-bold">仟</label>
                <span>{{print.B3}}</span>
                <label class="font-bold">佰</label>
                <span>{{print.B4}}</span>
                <label class="font-bold">拾</label>
                <span>{{print.B5}}</span>
                <label class="font-bold">元</label>
                <span>{{print.B6}}</span>
                <label class="font-bold">角</label>
                <span>{{print.B7}}</span>
                <label class="font-bold">分</label>
                <label class="ml-10px">￥</label>
                <span style="padding: 5px 6px 5px 0; text-align: left">{{print.je}}</span>
              </td>
            </tr>
            <tr>
              <td class="td-left">单位主管</td>
              <td class="text-left"></td>
              <td class="td-left">部门主管</td>
              <td class="text-left"></td>
            </tr>
          </table>
          <div class="footer" style="font-size: 12px; padding: 5px 8px">
            <div style="width: 50mm">会计主管</div>
            <div style="width: 44mm">审核</div>
            <div style="width: 44mm">出纳</div>
            <div style="width: 25mm">填报人</div>
          </div>
        </view>
        <div class="paging"></div>
      </section>
    </a-card>

  </BasicModal>
</template>
<script lang="ts" setup>
//表单赋值
import { BasicModal, useModalInner } from "/@/components/Modal";
import { reactive, ref } from "vue";
import { printJS } from "/@/hooks/web/usePrintJS";
import { view } from "/@/views/full/account/types/AccountPrint.api";
import { filterObj } from "/@/utils/common/compUtils";
import { useMessage } from "/@/hooks/web/useMessage";
import { PageWrapper } from '/@/components/Page';

import dayjs from 'dayjs';
const { createMessage: $message } = useMessage();

const date = new Date()
let year = dayjs(date).format('YYYY')
let month = dayjs(date).format('MM')
let day  = dayjs(date).format('DD')

let printList = reactive<any>({});  //业务收支明细

const [registerModal, { closeModal }] = useModalInner(async (data) => {
  await init(data);
  //console.info("useModalInner@@@@@", data)
});

function init(record) {
  if (!record.ids) {
    alert("订单编号不能为空!");
    return;
  }
  view(filterObj(record)).then((res) => {
    try {
      if (res.success != true) {
        $message.warning(res.message)
        return false;
      }
      let result = res.result;
      //1、业务数据 - 初始化
      Object.assign(printList, result);
    } catch (e) {
      alert("initData : " + e);
      return false;
    }
  }).finally(() => {
    //data.loading = false
  });
}

const model = reactive({
  printer: '张三',
  printTime: '2021-12-31 23:59:59',
  printContent: '打印内容：这是一个打印测试！',
  printReason: '做一个打印测试',
  fileList: [
    {
      uid: '-1',
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    {
      uid: '-2',
      name: 'pic1.png',
      status: 'done',
      url: 'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg',
    },
  ],
});
const previewImage = ref('');
const previewVisible = ref(false);

function onPrint() {
  printJS({
    printable: '#printContent',
    type: 'html',
    style: `@page { size: auto; } .paging{page-break-after: always;}`,
  });
}

function handlePreview(file) {
  previewImage.value = file.url || file.thumbUrl;
  previewVisible.value = true;
}

function handleChange({ fileList }) {
  model.fileList = fileList;
}

</script>
<style lang="less" scoped>
.j-print-demo .ant-card-body {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1%;
  border: 0 solid black;
  min-width: 800px;
  color: #000000 !important;
}

.sign .ant-input {
  font-weight: bolder;
  text-align: center;
  border-left-width: 0 !important;
  border-top-width: 0 !important;
  border-right-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

@page{
  size: auto A4 landscape;
  margin: 0;
}

#printContent{
  width: 180mm;
  margin: 0 auto;
  font-size: 12px;
}

table, table tr th, table tr td { border: 1px solid; }

table { line-height: 25px; text-align: center; border-collapse: collapse; }

.table-box { border: 1px solid; }

.h1-page{
  position: relative;
  font-weight: 600;
  margin: 0 auto;
  text-align: center;
  top: 7mm;
  font-size: 22px;
  letter-spacing: 15px;
}
.span-page{
  margin: 0 auto;
  margin-top: 8mm;
  width:53mm;
  font-size: 12px;
}
.span-page span{
  display: inline-block;
}
.span-page span label{
  font-size: 16px;
  font-weight: 600;
  padding: 0 2px;
  height: 18px;
  line-height: 18px;
}
.table-page{
  width: 180mm;
  margin: 0 auto;
}
.table-page td {
  padding: 5px 12px;
}
.table-page td span{
  padding: 5px 6px;
  font-size: 16px;
}
.td-left {
  width: 15mm;
  text-align-last: justify;
}
.footer{
  height: 25px;
}
.footer div{
  display: inline-block;
  float: left;
}


.close{
  position: absolute;
  width:15px;
  height: 15px;
  border: 1px solid;
  border-radius: 15px;
}
.close::before,.close::after {
  position: absolute;
  content: ' ';
  background-color: #cccccc;
  width: 0px;
  height: 10px;
  border:1px solid;
  left: 9px;
  top: 2px;
}
.close::before {
  transform: rotate(45deg);
}

.close::after {
  transform: rotate(-45deg);
}

</style>
